<template>
  <div class="app-container">
	  <el-row>
		  <el-col :span="4" class="left">
			  <el-menu>
				<el-menu-item :index="index.toString()" v-for="(item,index) in leftData" @click="type(item)">
			      <i class="el-icon-s-grid"></i>
			      <span slot="title">{{item.cate_name}}</span>
			    </el-menu-item>
			  </el-menu>
		  </el-col>
		  <el-col :span="18" class="right">
			  <div class="top">
				  <el-input class="topInput" v-model="topInp" placeholder="请输入内容"></el-input>
				  <el-button type="primary" @click="queryTop">查询</el-button>
			  </div>
			  <el-button class="btn" type="primary" @click="showAdd = true">新增</el-button>
			  <right-table :leftData="leftData" :rightData="rightData" :lessionList="lessionList" :teaList="teaList" :queryType="queryType" :page="page" :limit="limit"></right-table>
			  <!-- 底部分页 -->
			  <div style="margin-left: 15px;">
				  <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="page"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="limit"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total">
				  </el-pagination>
			  </div>
		  </el-col>
	  </el-row>
	  <el-dialog title="新增" :visible.sync="showAdd" width="800px">
		  <add-data :leftData="leftData" :lessionList="lessionList" :teaList="teaList" :queryType="queryType" :btn="'添加'"></add-data>
	  </el-dialog>
  </div>
</template>

<script>
  import { queryPayCate,queryPayItem,queryLession,queryTeach } from '@/api/studentRecruit.js'
  import rightTable from './components/rightTable.vue'
  import addData from './components/addData.vue'
  export default {
    name: 'index2',
	components:{
		rightTable,
		addData
	},
    data() {
      return {
		topInp:'', //顶部输入框
		typeId:'', //类别ID
        leftData:[], //左侧类别栏
		rightData:[], //右侧类别栏
		page:1,	//当前页数
		limit:10, //每页几条
		total:0, //总共几条
		total_page:0, //总共几页
		showAdd:false, //新增弹窗
		lessionList:[], //课程列表
		teaList:[], //教材列表
      }
    },
	created() {
	  this.leftTit()
	  this.queryType()
	  this.queryTea()
	  this.queryLessionList()
	},
    methods: {
	  //教材列表
	  async queryTea(){
		  let resData = {}
		  let data = await queryTeach(resData)
		  if(data.code == 200){
			  console.log(data.data.list);
			  this.teaList = data.data.list
		  }
	  },
	  //课程列表
	  async queryLessionList(){
	  	let resData = {}
	  	let data = await queryLession(resData)
	  	if(data.code == 200){
	  		this.lessionList = data.data.list
			console.log('课程列表',this.lessionList);
	  	}
	  },
      //其他收费项栏目
	  async leftTit(){
		  let resData = {}
		  let data = await queryPayCate(resData)
		  if(data.code == 200){
			  console.log(data);
			  this.leftData = data.data
			  console.log('其他收费项栏目',this.leftData);
		  }
	  },
	  //顶部查询按钮
	  queryTop(){
		  this.page = 1
		  this.limit = 10
		  this.queryType()
	  },
	  //点击左侧类别查询
	  async queryType(){
		  let resData = {
			  page:this.page,
			  limit:this.limit,
			  item_name:this.topInp,
			  cate_id:this.typeId,
		  }
		  let data = await queryPayItem(resData)
		  if(data.code == 200){
			  console.log(data.data.list);
			  this.rightData = data.data.list
			  this.total = data.data.total
			  this.total_page = data.data.total_page
		  }
	  },
	  type(row){
		  this.page = 1
		  this.limit = 10
		  this.typeId = row.unid
		  this.queryType()
	  },
	  //分页
	  handleSizeChange(val) {
	  	console.log(`每页 ${val} 条`);
	  	this.limit = val
	  	this.queryType()
	  },
	  handleCurrentChange(val) {
	  	console.log(`当前页: ${val}`);
	  	this.page = val
	  	this.queryType()
	  },
    }
  }
</script>

<style lang="scss" scoped>
  .left{
	  border: 1px solid #AFAFAF;
	  border-radius: 25px;
	  margin-right: 80px;
	  height: 800px;
	  padding-top: 20px;
  }
  .right{
	  border: 1px solid #AFAFAF;
	  border-radius: 25px;
	  height: 800px;
  }
  .top{
	  display: flex;
	  flex-direction: row;
	  margin: 10px 0px 0px 20px;
  }
  .topInput{
	  width: 200px;
	  margin-right: 20px;
  }
  .btn{
	  margin: 10px 0px 0px 20px;
  }
</style>
